<template>
	<yd-layout id='search' class=''>
		<div class="header" slot='top'>
			<div class="header_input" >
				<img class="header_img" src="../../assets/search.png" alt="" />
				<!--autofocus="autofocus"-->
				<input 
					ref='inputRef'
					@focus="inputFocus" 
					v-model.trim="searchInput" 
					@blur="inputBlur" 
					type="text" 
					
					@keyup.enter='search(searchInput,true)'
				/>
				<img @click="searchInput=''" v-show="closeFlg&&searchInput" src="../../assets/search_2.png" class="header_close_img" alt="" />
			</div>
			<div class="header_btn" @click="$router.go(-1)">取消</div>
		</div>
		<div class="content" >
			<div v-show="searchFlg" class="history_list_f">
				<div  v-for="item in historyList" @click="search(item)">
					<div v-if="item" class="history_list" >
						<img v-if="item" class="history_list_img" src="../../assets/search_1.png" alt="" />
						<div v-if="item" class="history_list_title c_text_ellipsis_1">{{item}}</div>
					</div>
				</div>
			</div>
			<div v-show="!searchFlg&&(videoList.length>0||articleList.length>0||product_list.length>0)" class="all_list" >
				<div class="all_list_total">共搜索到{{allTotal}}个相关结果</div>
				<div class="all_list_nav">
					<div class="nav_list"  :class="navNum==1?'nav_active':''">
						<div>
							<label @click="navNum=1" for="">视频</label>
						</div>
						<span></span>
					</div>
					<div class="nav_list" :class="navNum==2?'nav_active':''">
						<div>
							<label @click="navNum=2" for="">文章</label>
						</div>
						<span></span>
					</div>
					<div class="nav_list" :class="navNum==3?'nav_active':''">
						<div>
							<label @click="navNum=3" for="">产品</label>
						</div>
						<span></span>
					</div>
				</div>
				<div class="video_list" v-show="navNum==1">
					<div style="background: white;" v-show="videoList.length>0">
						<yd-infinitescroll :callback="getVideoList" ref="infinitescrollDemo">
							<VideoList :goVideoPlay='goVideoPlay' slot="list"  :dataList='videoList' :member='member' :class='indexVideoList'></VideoList>
								
							<!-- 数据全部加载完毕显示 -->
					        <span slot="doneTip">没有更多数据了~~</span>
					
					        <!-- 加载中提示，不指定，将显示默认加载中图标 -->
					        <!--<img slot="loadingTip" src="path/img/loading.svg"/>-->
						</yd-infinitescroll>
					</div>
					<NoList v-show='videoList.length==0'>
						<img slot='img' src="../../assets/kong_4.png" alt="" />
					</NoList>
				</div>
				<div class="video_list" v-show="navNum==2">
					<div style="background: white;" v-show="articleList.length>0">
						<yd-infinitescroll :callback="getArticleList" ref="infinitescrollDemoArticle">
							<ArticleList slot="list" :articleTime='false' :dataList='articleList'></ArticleList>
							<!-- 数据全部加载完毕显示 -->
					        <span slot="doneTip">没有更多数据了~~</span>
					
					        <!-- 加载中提示，不指定，将显示默认加载中图标 -->
					        <!--<img slot="loadingTip" src="path/img/loading.svg"/>-->
						</yd-infinitescroll>
					</div>
					<NoList v-show='articleList.length==0'>
						<img slot='img' src="../../assets/kong_4.png" alt="" />
					</NoList>
				</div>
				<!--产品-->
				<div class="video_list" v-show="navNum==3">
					<div style="background: white;" v-show="product_list.length>0">
						<yd-infinitescroll :callback="getSearchProduct" ref="infinitescrollDemoProduct">
							<!--product_list-->
							<div class="product_list_f" slot="list" >
								<div class="product_list" @click="goProductDetail(item)" v-for="item in product_list">
									<img class="product_list_img" :src="item.title_img" alt="" />
									<div class="product_list_name">{{item.title}}</div>
								</div>
							</div>
								
							<!-- 数据全部加载完毕显示 -->
					        <span slot="doneTip">没有更多数据了~~</span>
					
					        <!-- 加载中提示，不指定，将显示默认加载中图标 -->
					        <!--<img slot="loadingTip" src="path/img/loading.svg"/>-->
						</yd-infinitescroll>
					</div>
					<NoList v-show='product_list.length==0'>
						<img slot='img' src="../../assets/kong_4.png" alt="" />
					</NoList>
				</div>
			</div>
		</div>
		<div ref='csBtn'></div>
	</yd-layout>
</template>

<script>
	import {InfiniteScroll} from 'vue-ydui/dist/lib.rem/infinitescroll';
	import {BackTop} from 'vue-ydui/dist/lib.rem/backtop';
	import ArticleList from '../../components/ArticleList/ArticleList.vue'
//	import AudioList from '../../components/AudioList/AudioList.vue'
	import VideoList from '../../components/VideoList/VideoList.vue'
	export default{
		components:{
			[InfiniteScroll.name]:InfiniteScroll,
			[BackTop.name]:BackTop,
			[ArticleList.name]: ArticleList,
			[VideoList.name]: VideoList,
		},
		data(){
			return {
				member:true,
				indexVideoList:'index_video_list',
				historyList:[],
				searchFlg:false,
				articleList:[],
				videoList:[],
				product_list:[],
				searchInput:'',
				pageNum_article:1,
				pageNum_video:1,
				pageNum_product:1,
				pageCount:10,
				allTotal:0,
				navNum:1,
				closeFlg:false,
				searchNum:0,
			}
		},
		created() {
			
			
		},
		watch: {
			
		},
		computed: {
			
		},
		mounted(){
			document.title='搜索';
			this.$refs.csBtn.addEventListener('click',()=>{
				this.$refs.inputRef.focus()
			})
			this.$refs.csBtn.click()
			this.getHistory()
		},
		methods:{
			//去视频播放页面
			goVideoPlay(item){
				this.$root.videoPlayFlg(item)
			},
			goProductDetail(item){
				this.$router.push({
					name: 'productDetail',
					query: {
						id: item.id
					}
				})
			},
			inputFocus(){
				this.$refs.inputRef.focus()
				this.searchFlg=true
				this.closeFlg=true
			},
			inputBlur(){
				setTimeout(()=>{
					this.searchFlg=false
					this.closeFlg=false
				},200)
			},
			getHistory(){
				this.$root.ajax({
					name: 'video/history',
					type:'get',
					closeAllLoading:true,
					params: {
						keyword:'',
					}
				}).then((d) => {
					this.historyList=d.data
				})
			},
			search(item,flg){
				this.searchNum++
				this.searchInput = item 
				if(flg){
					setTimeout(()=>{
						this.searchFlg=false
					},200)
				}
				console.log(this.searchInput)
				
				this.pageNum_article=1;
				this.pageNum_video=1;
				this.pageNum_product=1;
				this.pageCount=10;
				
				this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.reInit');
				this.$refs.infinitescrollDemoArticle.$emit('ydui.infinitescroll.reInit');
				this.$refs.infinitescrollDemoProduct.$emit('ydui.infinitescroll.reInit');
				
				this.videoList=[]
				this.articleList=[]
				this.product_list=[]
				this.allTotal=0
				
				this.getVideoList(true)  //视频
				this.getArticleList()  //课程
				this.getSearchProduct() //产品
			},
			getSearchProduct(){
				this.$root.ajax({
					name: 'product/search',
					type:'get',
					params: {
						keyword:this.searchInput ,
						page:this.pageNum_video,
						count:this.pageCount
					}
				}).then((d) => {
					this.allTotal = d.data.video_total + d.data.article_total + d.data.product_total
					this.product_list = [...this.product_list, ...d.data.product_list];
					console.log(this.product_list)
                    if (this.product_list.length >= d.data.product_total ) {
                        /* 所有数据加载完毕 */
                        this.$refs.infinitescrollDemoProduct.$emit('ydui.infinitescroll.loadedDone');
                        return;
                    }

                    /* 单次请求数据完毕 */
                    this.$refs.infinitescrollDemoProduct.$emit('ydui.infinitescroll.finishLoad');

                    this.pageNum_product++;
                    
				})
			},
			getVideoList(flg){
				this.$root.ajax({
					name: 'video/search',
					type:'get',
					params: {
						keyword:this.searchInput ,
						page:this.pageNum_video,
						count:this.pageCount
					}
				}).then((d) => {
					this.allTotal = d.data.video_total + d.data.article_total+ d.data.product_total
					this.videoList = [...this.videoList, ...d.data.video_list];
                    if (this.videoList.length >= d.data.video_total ) {
                        /* 所有数据加载完毕 */
                        this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
                        return;
                    }

                    /* 单次请求数据完毕 */
                    this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.finishLoad');

                    this.pageNum_video++;
                    
					
				})
			},
			getArticleList(o){
				this.$root.ajax({
					name: 'article/search',
					type:'get',
					params: {
						keyword:this.searchInput ,
						page:this.pageNum_article,
						count:this.pageCount
					}
				}).then((d) => {
					this.allTotal = d.data.video_total + d.data.article_total+ d.data.product_total
					
					for(let a = 0; a < d.data.article_list.length; a++) {
						d.data.article_list[a].newTime = this.$root.getDate(new Date(d.data.article_list[a].create_time * 1000))
					}
					this.articleList = [...this.articleList, ...d.data.article_list];
					
                    if (this.articleList.length >= d.data.article_total ) {
                        /* 所有数据加载完毕 */
                        this.$refs.infinitescrollDemoArticle.$emit('ydui.infinitescroll.loadedDone');
                        return;
                    }

                    /* 单次请求数据完毕 */
                    this.$refs.infinitescrollDemoArticle.$emit('ydui.infinitescroll.finishLoad');

                    this.pageNum_article++;
				})
			},
		}
	}
</script>

<style lang="scss">
	@import './search.scss';
</style>